<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :destroy-on-close="true"
  >
    <!-- v-if : 用于关闭dialog时销毁组件，防止下次打开触发rules验证 -->
    <el-form
      v-if="isShow"
      :model="formDataModel"
      :rules="formDataRules"
      :label-position="labelPosition"
      :inline="false"
      :size="size"
      :label-width="labelWidth"
      ref="form"
    >
      <slot v-for="item in formData" :name="item.prop" :item="item">
        <el-form-item
          v-if="item.inputType == 'text'"
          :label="item.label"
          :prop="item.prop"
          @input="forceUpdate"
        >
          <el-input v-model="item.value" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          v-if="item.inputType == 'textarea'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input
            type="textarea"
            v-model="item.value"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          v-if="
            item.inputType == 'radio' &&
            item.radioItems &&
            item.radioItems.length > 0
          "
          :label="item.label"
          :prop="item.prop"
        >
          <el-radio-group v-model="item.value">
            <el-radio
              v-for="(radioItem, index) in item.radioItems"
              :key="index"
              :label="radioItem.label"
              >{{ radioItem.text }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="item.inputType == 'select'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-select v-model="item.value" placeholder="请选择">
            <el-option
              v-for="selectItem in item.selectItems"
              :key="selectItem.value"
              :label="selectItem.label"
              :value="selectItem.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="item.inputType == 'number'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input-number
            v-model="item.value"
            :min="item.min"
            :max="item.max"
          ></el-input-number>
        </el-form-item>

        <el-form-item
          v-if="item.inputType == 'date'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-date-picker
            type="date"
            v-model="item.value"
            placeholder="请选择日期"
            :format="item.formatDate"
          ></el-date-picker>
        </el-form-item>
      </slot>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onCancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="onSubmit" :loading="loading"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "PopupWindow",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "新窗口",
    },
    size: {
      type: String,
      default: "mini",
    },
    labelWidth: {
      type: String,
      default: "80px",
    },
    formData: {
      type: Array,
      default() {
        return [
          //goto:
          // [
          //   {
          //     label: "姓名",
          //     prop: "name",
          //     inputType: "text",
          //     rule: { required: true, message: "请输入姓名", trigger: "blur" },
          //   },
          //   {
          //     label: "性别",
          //     prop: "gender",
          //     inputType: "radio",
          //     value: "1",
          //     radioItems: [
          //       { label: "1", text: "男" },
          //       { label: "0", text: "女" },
          //     ],
          //     rule: { required: true, message: "请选择性别", trigger: "blur" },
          //   },
          //   {
          //     label: "状态",
          //     prop: "status",
          //     inputType: "select",
          //     value: true,
          //     selectItems: [
          //       { label: "激活", value: true },
          //       { label: "禁用", value: false },
          //     ],
          //     rule: { required: true, message: "请选择状态", trigger: "blur" },
          //   },
          //   {
          //     label: "排序",
          //     prop: "sort",
          //     inputType: "number",
          //     value: 0,
          //     min: 0,
          //     max: 10,
          //   },
          //   {
          //     label: "生日",
          //     prop: "birthday",
          //     inputType: "date",
          //     formatDate: "yyyy-MM-dd",
          //   },
          //   {
          //     label: "邮箱",
          //     prop: "email",
          //     rule: { required: true, message: "邮箱", trigger: "blur" },
          //   },
          //   {
          //     label: "手机号",
          //     prop: "phoneNumber",
          //     rule: { required: true, message: "手机号", trigger: "blur" },
          //   },
          //   {
          //     label: "备注",
          //     prop: "remark",
          //     inputType: "textarea",
          //     value: "备注啊",
          //   },
          // ],
        ];
      },
    },
    labelPosition: {
      type: String,
      default: "right",
    },
    submit: {
      type: Function,
      defult: null,
    },
  },
  computed: {
    formDataModel() {
      let model = {};
      this.formData.forEach((el) => {
        model[el.prop] = el.value;
      });
      return model;
    },
    formDataRules() {
      let rules = {};
      this.formData.forEach((el) => {
        rules[el.prop] = el.rules;
      });
      return rules;
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    handleClose() {
      this.onCancel();
    },
    hideLoading() {
      this.loading = false;
    },
    onCancel() {
      this.$refs["form"].resetFields();
      this.$emit("update:isShow", false);
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.loading = true;
            if (this.submit) {
              this.submit(this.formDataModel);
            }
          });
        }
      });
    },
    forceUpdate() {
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="">
</style>